<template>
    <div class="login-container">
        <BackgroundVideo />

        <div class="login-card">
            <div class="card-header">
                <div class="logo">
                    <img src="/public/svg/logo.jpg" alt="Logo">
                </div>
                <h1>欢迎回来</h1>
                <p>请登录您的账户</p>
            </div>

            <div class="form-container">
                <form @submit.prevent="handleLogin" class="login-form">
                    <div class="form-group" :class="{ 'focused': usernameFocused }">
                        <label for="username">用户名</label>
                        <div class="input-wrapper">
                            <input id="username" v-model="username" type="text" required @focus="usernameFocused = true"
                                @blur="usernameFocused = false" placeholder="请输入用户名">
                            <span class="input-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </span>
                        </div>
                    </div>

                    <div class="form-group" :class="{ 'focused': passwordFocused }">
                        <label for="password">密码</label>
                        <div class="input-wrapper">
                            <input id="password" v-model="password" type="password" required
                                @focus="passwordFocused = true" @blur="passwordFocused = false" placeholder="请输入密码">
                            <span class="input-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg>
                            </span>
                        </div>
                    </div>

                    <div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" v-model="rememberMe">
                            <span>记住我</span>
                        </label>
                        <router-link to="/forgot-password" class="forgot-password">忘记密码?</router-link>
                    </div>

                    <button type="submit" class="login-button" :disabled="isLoading">
                        <span v-if="!isLoading">登录</span>
                        <span v-else class="loading-spinner"></span>
                    </button>
                </form>
            </div>

            <div class="card-footer">
                <p>还没有账户? <router-link to="/register">立即注册</router-link></p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import BackgroundVideo from '@/components/BackgroundVideo.vue';

import { login, register } from '@/api/login'
import { useTokenStore } from '@/stores/token';

const router = useRouter();

const username = ref('');
const password = ref('');
const rememberMe = ref(false);
const usernameFocused = ref(false);
const passwordFocused = ref(false);
const isLoading = ref(false);
const tokenStore = useTokenStore()
const handleLogin = async () => {
    if (isLoading.value) return;

    isLoading.value = true;

    try {
        // const res = await api.login({
        //   username: username.value,
        //   password: password.value
        // });
        const res = await login({
            username: username.value,
            password: password.value
        });

        if (res.code === 200) {
            tokenStore.setAuthData(res.data) // 存储完整认证数据
            // 跳转到首页
            window.location.href = '/'
        } else {
            throw new Error(res.msg || '用户名或密码错误');
        }
    } catch (error) {
        console.error('登录失败:', error);
        alert(error.msg || '登录失败，请稍后再试');
    } finally {
        isLoading.value = false;

    }
};
</script>

<style scoped>
:root {
    --primary-color: #4361ee;
    --primary-hover: #3a56d4;
    --text-color: #2b2d42;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --dark-gray: #6c757d;
    --white: #ffffff;
    --error-color: #ef233c;
    --success-color: #4cc9f0;
    --border-radius: 12px;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 登录容器 */
.login-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    overflow: hidden;
    background-color: #f5f7fa;
}

/* 视频背景 */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -99;
}

.video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* 登录卡片 */
/* 登录卡片 */
.login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header {
    padding: 2.5rem 2rem 1.5rem;
    text-align: center;
    background-color: #4361ee;
    color: #ffffff;
}

.logo {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logo img {
    width: 40px;
    height: 40px;
}

.card-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.card-header p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* 表单容器 */
.form-container {
    padding: 0 2rem 2rem;
}

/* 登录表单 */
.login-form {
    background-color: white;
    border-radius: 8px;
}

.form-group {
    position: relative;
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
}

.input-wrapper {
    position: relative;
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #f8f9fa;
    color: #2b2d42;
}

.form-group input:focus {
    outline: none;
    border-color: #4361ee;
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
    background-color: #ffffff;
}

.form-group input:hover {
    border-color: #adb5bd;
}

.form-group input::placeholder {
    color: #adb5bd;
}

/* 表单聚焦状态 */
.form-group.focused label {
    color: #4361ee;
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    transition: all 0.3s ease;
}

.form-group.focused .input-icon {
    color: #4361ee;
}

/* 表单选项 */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.remember-me {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #6c757d;
}

.remember-me input {
    margin-right: 0.5rem;
}

.forgot-password {
    color: #4361ee;
    text-decoration: none;
    transition: all 0.3s ease;
}

.forgot-password:hover {
    text-decoration: underline;
}

/* 登录按钮 */
.login-button {
    width: 100%;
    padding: 0.9rem;
    background-color: #4361ee;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-button:hover:not(:disabled) {
    background-color: #3a56d4;
    transform: translateY(-2px);
}

.login-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 卡片页脚 */
.card-footer {
    padding: 1.5rem 2rem;
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
    border-top: 1px solid #e9ecef;
}

.card-footer a {
    color: #4361ee;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.card-footer a:hover {
    text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .login-container {
        padding: 1rem;
    }

    .login-card {
        border-radius: 12px;
    }

    .card-header {
        padding: 1.5rem 1rem 1rem;
    }

    .form-container {
        padding: 0 1.5rem 1.5rem;
    }
}
</style>